<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="提现" right-text="提现明细" @clickLeft="leftBack" @clickRight="rightWithdraw" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-mg-20 dfj-bg-white dfj-t-333">
			<view class="dfj-flex dfj-flex-ai-c dfj-bd-b-e5e dfj-pd-lr-20">
				<view></view>
				<view class="dfj-flex-1 dfj-pd-tb-30">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="bankName" mode="selector">
					   <template v-if="index == -1">请选择收款账户</template>
					   <template v-else>{{ array[index].bankName }}</template>
					</picker>
				</view>
				<view><text class="dfj-icon icon-arrow-right"></text></view>
			</view>
			<view class="dfj-bd-b-e5e dfj-pd-lr-30 dfj-pd-t-30">
				<view class="">提现金额</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-mg-t-20">
					<view>￥</view>
					<view class="dfj-flex-1"><input v-model="money" class="dfj-pd-tb-20" type="number"></view>
					<view class="dfj-t-base" @click="all()">全部提现</view>
				</view>
			</view>
			<view class="dfj-pd-30 dfj-t-999">
				<view class="dfj-flex dfj-flex-ai-c dfj-mg-b-15">
					<view class="dfj-flex-1">总方糖{{ wallet }}</view>
					<view>提现收取服务费{{ w_info.extractCost * 100 }}%</view>
				</view>
				<view>可提取方糖{{ (wallet* Number(1-w_info.integralPercent)).toFixed(2) }}</view>
			</view>
		</view>
		
		<view class="dfj-pd-30"><button type="primary" @click="openMx()">预计3个工作日到账，确认提现</button></view>
		
		<uni-popup ref="popupWithdrawal" type="bottom">
			<view class="dfj-bg-white">
				<view class="dfj-t-c dfj-t-333 dfj-f-26 dfj-pd-35">收费提示</view>
				<view v-if="money" class="dfj-pd-lr-30">
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-20">
						<view class="dfj-flex-1 dfj-t-666">提现金额</view>
						<view class="dfj-t-danger">￥{{ money }}</view>
					</view>
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-20">
						<view class="dfj-flex-1 dfj-t-666">本次提现手续费</view>
						<view class="dfj-t-danger">￥{{ (money*w_info.extractCost).toFixed(2) }}</view>
					</view>
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-20">
						<view class="dfj-flex-1 dfj-t-666">实际提现到账</view>
						<view class="dfj-t-danger">￥{{ (money*Number(1-w_info.extractCost)).toFixed(2) }}</view>
					</view>
					<view class="dfj-pd-tb-20 dfj-t-666">
						提现服务费费用说明:提现服务费按小数点2位数四舍五入计算，例如:当服务费为3.596时则实际收取3.60元计算，当服务费为3.592时则实际收取3.59元依此类推。
					</view>
				</view>
				<view class="dfj-pd-30">
					<button type="primary" @click="openPass()">继续提现</button>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popup" type="bottom">
			<view class="dfj-bg-white">
				<view class="dfj-pd-30 dfj-t-c">
					<view class="dfj-t-666 dfj-f-28">请输入交易密码</view>
					<view class="code-box">
						<block v-for="(item, index) in 6" :key="index">
							<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
						</block>
					</view>
				</view>
				<view class="keyboard">
					<block v-for="(item, index) in 9" :key="index">
						<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
					</block>
					<view class="keyboard-item hide"></view>
					<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
					<view class="keyboard-item delte" @tap="del()"><image style="width: 60rpx;height: auto;" mode="widthFix" src="/static/img/home/del.png" :lazy-load="true"></image></view>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	export default{
		data() {
			return {
				array: [],
				index: -1,
				wallet: '',
				w_info: '',
				money: '',
				password: ''
			}
		},
		onLoad() {
			this.getWithdrawalInfo();
			this.getBankList();
			this.wallet = JSON.parse(localStorage.getItem('loginInfo')).userInfo.account.wallet;
		},
		methods:{
			leftBack() {
				uni.navigateBack();
			},
			rightWithdraw() {
				uni.navigateTo({
					url: '/pages/my/Integral-detail'
				})
			},
			all() {
				this.money = (this.wallet* Number(1-this.w_info.integralPercent)).toFixed(2)
			},
			getWithdrawalInfo() {
				this.$http({
					url: '/account/getWithdrawInfo'
				}).then(res=>{
					this.w_info = res.data;
				})
			},
			getBankList() {
				this.$http({
					url: '/userOpt/getUserBankList'
				}).then(res=> {
					this.array = res.data;
					this.$nextTick(()=>{
						if(this.array.length>=1){
							this.index = 0
						}
					})
				})
			},
			bindPickerChange(e){
				this.index = e.detail.value
			},
			openMx(){
				if(this.money == ''){
					uni.showToast({
						title: '请输入提取方糖数量',
						icon: 'none'
					})
					return false
				}
				let num = this.wallet* Number(1-this.w_info.integralPercent)
				if(Number(this.money) > Number(num)){
					uni.showToast({
						title: '提取方糖数不可大于可提取方糖',
						icon: 'none'
					})
					return false
				}
				this.$refs.popupWithdrawal.open()
			},
			openPass() {
				this.$refs.popupWithdrawal.close()
				this.$refs.popup.open()
			},
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						this.$http({
							url: '/userOpt/withDraw',
							data: {
								userBankId: this.array[this.index].id,
								money: this.money,
								payPwd: this.password
							}
						}).then(res=> {
							if(res.flag){
								uni.showToast({	title: '提现成功' });
								uni.navigateTo({
									url: '/pages/my/Integral-detail'
								})
							}else{
								this.password = ''
							}
						})
					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.keyboard{
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition:all 0.2s ease-in 0.2s;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #EBEBEB;
		border-top:none;
		border-left:none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.code-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 1px solid #d0d0d0;
	}
	.code-box-item {
		width: 86rpx;
		height: 86rpx;
		background: #fff;
		font-size: 40rpx;
		line-height: 86rpx;
		text-align: center;
		flex: 1;
		border: 1rpx solid #e5e5e5;
	}
</style>
